<template lang="html">
  <Panel title="金融头条" :class="$style.panel">
    <section :class="$style.content">
      <swiper ref="mySwiper" :options="options" :not-next-tick="options.notNextTick">
        <swiper-slide v-for="(item,i) in sliderData" :key="i">{{item}}</swiper-slide>
      </swiper>
    </section>
  </Panel>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import Panel from "../core/panel.vue"
  import Slider from "../core/slider.vue"
  export default {
    data() {
      return {
        options: {
          autoplay: true,
          loop: true,
          direction:'vertical',
          delay:200,
          pagination: {
            el: ".swiper-pagination",
          },
          notNextTick: false,
          // 解决轮播宽度的问题。当监听该元素或者父级元素DOM发生变化时，会刷新一次
          observeParents: true,
          observer: true
        },
        sliderData:['百万白条券免费送，速来领取！！','签到领流量，1元500M！']
      }
    },
    components: {
        Panel,
        Slider,
        swiper,
        swiperSlide
    }
  }
</script>

<style lang="scss" module>
  @import '~@/assets/css/element.scss';

  .panel {
    @include panel;

    >h4 {
      display: none;
    }

    margin-top: 120px !important;

    .content {
      height: 72px;
      line-height: 72px;
      overflow: hidden;
      padding-left: 178px;
      background: url(//m.jr.jd.com/spe/qyy/main/images/scroll_title_img.png) left top no-repeat;
    }
  }
</style>
<style lang="scss">
  .swiper-container-vertical{
    height: 72px!important;
    .swiper-slide{
      font-family: PingFangSC-Medium;
      font-size: 28px;
      color: #333;
      height: 72px!important;
      em{
        color: #ddd;
        float: right;
        margin-right: 20px;
      }
    }
  }
</style>